<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>宠雨秒杀</title>
		<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
		<script type="text/javascript" src="./layui/layui.js"></script>
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> -->
	</head>

	<body style="background-color: #FAFAFA;">

		<script src="https://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="js/jquerysession.js"></script>
		<script src="./layui/layui.all.js"></script>

		<!-- 导航栏 -->
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<!-- 设置logo -->
				<div class="layui-logo">
					<a style="color: dodgerblue;" href="main.html">ChongYu SeckKill</a>
				</div>
				<!-- 左边导航栏 -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item">
						<a href="main.html">首页</a>
					</li>
					<li class="layui-nav-item">
						<a href="main.html">全部商品</a>
					</li>
					<li class="layui-nav-item">
						<a href="mainv1.html">正在抢购</a>
					</li>
					<li class="layui-nav-item layui-this">
						<a href="mainv2.html">预热商品</a>
					</li>
				</ul>
				<!-- 右边导航栏 -->
				<ul id="view" class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="index.html">立即登录</a>
					</li>
				</ul>
			</div>
		</div>

    <!-- 生成替换模板 -->
		<script id="user" type="text/html">
		 <li class="layui-nav-item">
			 <a>欢迎您: {{d.name}}</a>
		 </li>
		 <li class="layui-nav-item">
			 <a href="person.html">个人中心</a>
		 </li>
		  <li class="layui-nav-item">
			  <a onclick="loginout()">注销退出</a>
		  </li>
		</script>

		<!-- 配置导航栏信息 -->
		<script>
			function loginout() {
				$.session.clear();
				window.location.href = 'main.html';
			}

			$(toview())


			function toview() {
				//第三步：渲染模版
				var laytpl = layui.laytpl;

				var getTpl = user.innerHTML,
					view = document.getElementById('view'),
					data = $.session.get("user");

				if (data != null) {
					laytpl(getTpl).render(JSON.parse(data), function(html) {
						view.innerHTML = html;
					});
				}
			}
		</script>

    <!-- 商品容器 -->
    <div style="margin-top:20px;margin-left:50px;margin-right: 50px;" id="product" class="layui-row layui-col-space15"></div>
  
    <!-- 分页居中放置 -->
    <nav style="text-align: center;">
      <div id="page"  class="layui-col-md12"></div>
    </nav>

	<script>
		layui.use(['jquery', 'layer', 'laypage'], function() {
			var $ = layui.jquery,
				layer = layui.layer,
				miniAdmin = layui.miniAdmin,
				miniTongji = layui.miniTongji,
				laypage = layui.laypage;

			var page = 1; //当前页
			var limit = 10; //每页显示的数目
			var resCount, resData;
			var resPage = renderPage1();

			//渲染展示商品的html页面
			function renderProductHtml(data) {
				var str = ""; //用来存储html内容
				if (data.length > 0) {
					$.each(data, function(v, o) {
						str += "<div class='layui-col-md3'><div class='layui-card' style='width: 98%;height: 320px;'>";
						str += "<div style='padding:30px;float:center; text-align:center'><div style='margin-bottom: 20px;'><img onclick=window.open('productDetail.html?product_id="+o.id+"') alt='' src='"+o.img+"' width='200px' height='150px' /></div>";
						str += "<div style='text-align:left'><div style='height: 25px;'><label>商品名称:</label><span>"+o.name+"</span></div>";
						str += "<div style='height: 25px;'><label>价格:</label><span style='color:#FF3030;'>￥"+o.price+"</span></div>";
						str += "<div style='height: 25px;'><label>新旧程度:</label><span>"+o.describe+"</span></div><div style='height: 25px;'><label>销量:</label><span style='color:#CDC9C9;'>"+o.sale+"</span>";
						str += "<label>库存:</label><span style='color:#CDC9C9;'>"+o.count+"</span></div>";
						str += "<div style='display:none;'><label>商品ID:</label><span>"+o.id+"</span></div></div></div></div></div>";
					});
					$("#product").html(str);
				}

			}

			//同步加载商品数据
			function renderProduct(page, limit) {
				$.ajax({
					async: false,
					url: '/product/getallafter',
					data: {
						"page": page,
						"limit": limit
					},
					dataType: 'json',
					success: function(result) {
						console.info(result);
						resCount = result.data.count;
						resData = result.data.data.list;
						renderProductHtml(resData);
					}
				});
			}

			//分页的完整功能
			function renderPage1() {
				renderProduct(page, limit);
				laypage.render({
					elem: 'page',
					count: resCount,
					limit: limit,
					limits: [limit],
					curr: page,
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
					jump: function(obj, first) {
						//  console.info(obj);
						page = obj.curr;
						if (!first) {
							renderProduct(page, limit);
						}
					}
				});
			}

		});
	</script>
	
	</body>
</html>
